<script>
	export default {
		name: "Tab",
		props: {
			label: {
				type: String,
				default: "tab"
			},
			index: {
				type: [String, Number],
				default: "1"
			}
		},
		computed: {
			isActive() {
				return this.$parent.currentIndex === this.index
			}
		},
		mounted() {
			this.$parent.pans.push(this)
		},
		methods: {
			clickItemHandle() {
				this.$parent.getIndex(this.index);
			}
		},
		render() {
			let classNames = {
				tab: true,
				active: this.isActive
			}
			return ( <
				li onclick = {
					this.clickItemHandle
				}
				class = {
					classNames
				} > {
					this.label
				} < /li>
			)
		}
	}
</script>

<style scoped>
	.tab {
		flex: 1;
		list-style: none;
		line-height: 40px;
		margin-right: 15px;
		margin-left: 15px;
		position: relative;
		text-align: center;
	}

	.tab.active {
		border-bottom: 2px solid blue;
	}
</style>
